<template>
    <rx-layout>
        <template v-slot:center>
            <div class="BpmCommuHistory-center" v-if="checkHistorys.length>0">
                <div v-for="item in checkHistorys">
                    <div class="description-head">
                        <div class="description-head-portrait"><image src="@/static/male.png"/></div>
                        <div class="description-head-user description-head-user-createBy">
                            <div style="flex: 1">
                                <rx-user-info style="font-size: 16px;color: #303030" :userId="item.handlerId"/>
                                <div style="color: #909090;">{{ item.createTime }}</div>
                            </div>
                            <div style="margin-top: 10px">
                                <span class="description-head-nodeName">{{ $i18(item.nodeName) }}</span>
                            </div>
                            <div class="reply-communication" @click="replyFun(item)" v-if="canReplyFun(item)">
                                <i class="iconfont icon-brush"></i>{{ i18n('replyComm', '回复沟通') }}
                            </div>
                        </div>
                    </div>
                    <div class="bpm-description-common">
                        <i class="bpm-description-common-triangle"></i>
                        <div class="description-common">
                            <div style="color: #4285F4">{{ getReceiverName(item) }}:<span
                                class="bpm-description-common-reply">{{ item.opinion }}</span>
                            </div>
                        </div>
                        <template v-if="showAttachment(item.attachment)">
                            <div class="description-common-accessory"
                                 v-for="(subReceiver,index) in JSON.parse(item.attachment)">
                                <div class="iconBox description-iconBox"
                                     :class="rxClass(subReceiver)"></div>
                                <div style="flex: 1">
                                    <div
                                        class="description-common-accessory-con">{{subReceiver.name}}
                                    </div>
                                    <div class="description-common-accessory-user">
                                        <div>{{ subReceiver.createTime }}</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>

                    <!--回复沟通-->
                    <div class="communication" v-for="receiver in item.receivers">
                        <div class="communication-le"><i class="iconfont iconzhifeiji"></i></div>
                        <div style="flex: 1">
                            <div class="description-head">
                                <div class="description-head-portrait">
                                    <image src="@/static/male.png"/>
                                </div>
                                <div class="description-head-user">
                                    {{ receiver.receiverName }}
                                    <rx-user-info style="font-size: 16px;color: #303030" :userId="receiver.createBy"/>
                                </div>
                            </div>
                            <div class="bpm-description-communication">
                                <i class="bpm-description-common-communication-triangle"></i>
                                <div>{{i18n('reply','回复')}}<span
                                    style="color:#4285F4;margin-left: 5px">@{{ receiver.fullName }}</span>：<span>{{
                                        receiver.opinion
                                    }}</span>
                                </div>
                                <template v-if="showAttachment(receiver.attachment)">
                                    <div class="description-common-accessory"
                                         v-for="(subReceiver,index) in JSON.parse(receiver.attachment)">
                                        <div class="iconBox description-iconBox"
                                             :class="rxClass(subReceiver)"></div>
                                        <div style="flex: 1">
                                            <div
                                                class="description-common-accessory-con">{{subReceiver.name}}
                                            </div>
                                            <div class="description-common-accessory-user">
                                                <div>{{ subReceiver.createTime }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="BpmCommuHistory-empty" v-else>
                {{i18n('noMessages','没有留言')}}
            </div>
            <uni-popup ref="inputDialog" type="dialog">
                <uni-popup-dialog :cancelText="$ti18('rxForm.cancelBtn', '取消')" :confirmText="$ti18('rxForm.okBtn', '确定')" ref="inputClose" mode="input" :title="i18n('tips','提示')" :placeholder="i18n('replyComm','回复沟通')" @confirm="modalConfirm"></uni-popup-dialog>
            </uni-popup>
        </template>
    </rx-layout>
</template>

<script>
import RxLayout from '@/components/RxLayout';
import BpmTaskCommuApi from '@/api/rxBpm/bpmTaskCommu'
import RxUserInfo from "@/components/RxUserInfo"
import BpmTaskApi from "@/api/rxBpm/bpmTask";

export default {
    name: "BpmCommuHistory",
    data() {
        return {
            instId: '',
            checkHistorys: [],
            extMapping: {
                ".doc": "wordBox",
                ".docx": "wordBox",
                ".xls": "excelBox",
                ".xlsx": "excelBox",
                ".txt": "txtBox",
                ".pdf": "pdfBox",
                ".rar": "rarBox",
                ".zip": "zipBox",
            },
            checkHistorysUnhand: [],
            receiver: {},
            //传递过来的参数
            parameter: {},
        }
    },
    components: {
        RxLayout,
        RxUserInfo
    },
    onLoad(option) {
        let optionData = JSON.parse(option.data);
        this.instId = optionData.instId;
        this.parameter = optionData;
        this.getCommuData();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmLang",key);
        },
        getCommuData() {
            if (!this.instId) {
                return;
            }
            let parameter = {
                instId: this.instId,
                taskId: this.parameter.taskId || "",
                nodeId: this.parameter.nodeId || "",
            }
            BpmTaskCommuApi.getAllCommus(parameter).then(res => {
                if (!res.success) {
                    return;
                }
                this.checkHistorys = res.data;
            });
        },
        getReceiverName(item) {
            let returnName = "";
            let name = item.receiverNames;

            let names = name.split(",");

            for (let i = 0; i < names.length; i++) {
                if (i == 0) {
                    returnName = "@" + names[i];
                    continue
                }
                returnName = returnName + " @" + names[i];
            }
            return returnName;
        },
        canReplyFun(item) {
            let curUser = uni.getStorageSync("user");
            if (!this.parameter || !this.parameter.taskId) {
                return false;
            }
            if (this.parameter.taskId != item.replyTaskId) {
                return false;
            }
            if (item.type == "p") {
                return false;
            }
            if (!item.valid) {
                return false;
            }
            if (!item.receiverIds) {
                return false;
            }
            if (item.receiverIds.indexOf(curUser.userId) == -1) {
                return false;
            }
            if (item.receivers.length == 0) {
                return true;
            }
            for (let i = 0; i < item.receivers.length; i++) {
                if (curUser.userId == item.receivers[i].receiverId) {
                    return false;
                }
            }
            return true;
        },
        replyFun(item) {
            this.receiver = item;
            this.$refs.inputDialog.open();
        },
        showAttachment(val) {
            if(!val){
                return false;
            }
            try {
                let fileList = JSON.parse(val);
                if (fileList.length > 0) {
                    return true;
                }
            } catch (e) {
                return false;
            }
            return true;
        },
        rxClass(item) {
            //根据文件名  添加类名；
            var name = item.name;
            for (var key in this.extMapping) {
                if (name.indexOf(key) > -1) {
                    return this.extMapping[key];
                }
            }
            return "attachBox";
        },
        //确定沟通回复
        modalConfirm(value) {
            let self_ = this;
            let params = {
                files: [],
                msgType: [],
                msgTypes: "",
                opFiles: "[]",
                opinion: value,
                taskId: this.receiver.replyTaskId,
            };
            BpmTaskApi.replyLinkupTask(params).then(res => {
                if (res.success) {
                    uni.showToast({
                        title:res.message,
                        duration: 1500,
                        icon: 'success', // 图标类型（可选值：success/loading/none）
                        success:function (){
                            self_.getCommuData();
                        }
                    });

                } else {
                    uni.showToast({
                        title:self_.i18n('comFail','沟通失败'),
                        duration: 1500,
                        icon: 'error' // 图标类型（可选值：success/loading/none）
                    });
                }
            })
        }
    }
}
</script>

<style scoped>
.BpmCommuHistory-empty {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: center
}

.BpmCommuHistory-center {
    overflow: hidden;
    background-color: white;
    padding: 0.5rem;
    border-radius: 5px;
}

.communication {
    display: flex;
}

.description-head-user-createBy {
    display: flex;
}

.description-head-nodeName {
    margin-left: 10px;
}

.communication-le {
    color: #D8D8D8;
    margin-top: 30px;
    margin-right: 10px;
}

.description-head {
    display: flex;
    align-content: center;
    margin-bottom: 11px;
    margin-top: 17px;
}

.description-head-portrait {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 3px;
}

.description-head image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.description-head-user {
    font-size: 12px;
    color: #46494d;
    margin-top: 2px;
    margin-left: 10px;
    flex: 1;
}

.bpm-description-common {
    background: #ECF4FF;
    width: calc(100% - 1rem);
    padding: 10px;
    border-radius: 4px 4px 4px 4px;
    position: relative;
}

.bpm-description-communication {
    background: #F8F8F8;
    width: calc(100% - 1rem);
    padding: 10px;
    border-radius: 4px 4px 4px 4px;
    position: relative;
}

.bpm-description-common-communication-triangle {
    display: block;
    position: absolute;
    top: -19px;
    left: 12px;
    width: 12px;
    height: 9px;
    border: 10px solid;
    border-color: transparent transparent #F8F8F8 transparent;
}

.bpm-description-common-triangle {
    display: block;
    position: absolute;
    top: -19px;
    left: 12px;
    width: 12px;
    height: 9px;
    border: 10px solid;
    border-color: transparent transparent #ECF4FF transparent;
}

.bpm-description-common-reply {
    color: #303030;
    font-size: 14px;
    margin-left: 10px;
}

.description-common-accessory-con {
    white-space: nowrap;
    width: 300px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
}

.description-common-accessory {
    background: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
}

.reply-communication {
    color: #4285F4;
    font-size: .7rem;
    margin-left: .5rem;
    margin-top: .6rem;
}
</style>
